<template>
	<view class="live_list">
		<view class="live_header">
			<view class="user_wrap">
				<img class="avatar" :src="userInfo.avatar" v-if="Object.keys(userInfo).length > 0" />
				<img class="avatar" :src="errorImage" v-else />
				<text class="shopname">邓波测试店铺</text>
			</view>
			<view class="person_wrap">
				<u-icon class="search_icon" name="search" size="24" @click="GotoSearchPage"></u-icon>
				<text @click="userFollow">关注</text>
				<text class="division_line">|</text>
				<text @click="GotoPersonCenter">个人中心</text>
			</view>
		</view>
		<view class="live_wrap" v-if="courseList.length > 0">
			<view class="live_item" v-for="item in courseList" :key="item.id" @click="clickLive(item.id,item.type)">
				<view class="picture">
					<img :src="item.cover" @error="tabErrorPicture('courseList',item.id)" alt="" />
				</view>
				<view class="message_intro">
					<view class="title">{{item.title}}</view>
					<view class="message_footer">
						<view class="price_wrap">
							<text class="price">{{ item.price == 0 ? '免费' : '￥' + item.price }}</text>
							<text class="oldPrice">{{ item.marking_price == 0 ? '' : '￥' + item.marking_price }}</text>
						</view>
						<text class="recording">{{ item.view || 0 }}次观看</text>							
					</view>
				</view>
			</view>
			<view class="noMore">没有更多数据了哦~~</view>
		</view>
		<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/car.png" v-else></u-empty>
	</view> 
</template>

<script>
	import { api_getKnowledgeList } from '../../api/api'
	export default {
		data() {
		    return {
				courseList: [],
				total: 0,
				userInfo: {},
				errorImage: require('@/static/img/avatar.png'),
				errorProduct: require('@/static/img/default_image.jpg'), 
		    };
		},
		onLoad(options) {
			this.init(options);
		},
		created() {
			
		},
		methods: {
			init(opt){	// 页面初始化
				let query = {
				    id: opt.id,
				    status: 1,
				    page: 1,
				    limit: 10000,
				}	
				uni.showLoading({ title: '数据加载中...'	});
				api_getKnowledgeList(query).then(res => {
					uni.hideLoading();
					console.log('aa',res)
					if (res.code == 1) {	
						this.courseList = res.data.list;
						this.total = res.data.count;
					} else {
						uni.showToast({ title: res.msg,icon: 'error' });
					}
				}).catch(err => console.log(err));
			},
			clickLive(id,type) {	// 短视频直播item项		
				type == 'image_text' && uni.navigateTo({ url: `/pages/image_textcontent/index?id=${id}` });
				type == 'audio' && uni.navigateTo({ url: `/pages/audiocontent/index?id=${id}` });
				type == 'video' && uni.navigateTo({ url: `/pages/videocontent/index?id=${id}` });
			},	
			GotoSearchPage(){	//	搜索
				console.log('search');
				uni.navigateTo({ url: '/pages/searchList/index'	});
			},
			userFollow(){	// 关注
				console.log('user follow');
			},
			GotoPersonCenter(){	// 个人中心
				uni.navigateTo({ url: '/pages/my/index'	});
			},
			tabErrorPicture(name,id){	// 列表图片加载失败
				let i = this[name].findIndex(v => v.id == id);
				this[name][i].cover = this.errorProduct;		
			},
		} 
	}
</script>

<style lang="scss" scoped>
.live_list{
	padding: 0 0 20px;
	box-sizing: border-box;
	.live_header{
		display: flex;
		height: 50px;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #eee;
		padding: 0 10px;
		box-sizing: border-box;
		.user_wrap{
			display: flex;
			align-items: center;
			.avatar{
				display: block;
				width: 28px;
				height: 28px;
				border-radius: 50%;
				margin: 0 10px 0 0;
			}
			.shopname{
				font-size: 14px;
			}
		}
		.person_wrap{
			display: flex;
			align-items: center;
			font-size: 12px;
			.search_icon{
				display: inline-block;
				margin: 0 5px 0 0;			
				color: #ccc !important;
			}
			.division_line{
				display: inline-block;
				margin: 0 4px;
			}
		}
	}
	.live_wrap{
		.live_item{
			font-size: 12px;
			color: #323233;
			background-color: #fafafa;
			margin-top: 10px;
			padding: 5px 10px;
			box-sizing: border-box;
			display: flex;
			.picture{
				width: 100px;
				img{
					display: block;
					width: 100px;
					height: 100px;
				}
			}
			.message_intro{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 0 0 0 10px;
				width: calc(100vw - 120px);
				box-sizing: border-box;
				.title{
					font-size: 15px;
				}
				.price_wrap{
					.price{
						font-size: 12px;
						color: red;
					}
					.oldPrice{
						font-size: 12px;
						text-decoration: line-through;
						margin: 0 0 0 10px;
						color: #969799;
					}
				}
				.message_footer{
					display: flex;
					justify-content: space-between;
				}
			}			
		}
		.noMore{
			font-size: 14px;
			text-align: center;
			color: #ccc;
			margin: 20px 0 0;
		}
	}
}
</style>
